<template>
    <div class="base-table">
        <xc-table id="xc-table" ref="tableRef" v-bind="cloneAtt" :data="tableData" :columns="columns"
                  :row-class-name="rowClassName" :row-config="rowConfig" :span-method="spanMethod" :show-summary="showSummary"
                  :is-edit-row="isEditRow" :border="border" :height="height" :max-height="maxTableHeight" :row-key="rowKey"
                  @sort-change="onSortChange" @selection-change="onHandleSeletionChange" @select="onSelect"
        >
            <slot></slot>
            <template v-for="slot in Object.keys($slots)" #[slot]="scope">
                <slot :name="slot" v-bind="scope" />
            </template>
        </xc-table>
        <div class="Pagination">
            <el-Pagination :current-page="pageObj.pageNo" :page-size="pageObj.pageSize" :page-sizes="pageSizes"
                           layout="total, sizes, prev, pager, next, jumper" :total="pageObj.total"
                           @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange"
            />
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, nextTick } from 'vue';
import XcTable from '@x-tech/fe-pc-components/src/components/XcTableTemplate/index.vue';
import { setTableMaxHeight } from '@/utils/common';

export default defineComponent({
    name: 'baseTable',
    components: {
        XcTable,
    },
    props: {
        tableData: {
            type: Array,
            default: () => {
                return [];
            }
        },
        columns: {
            type: Array,
            default: () => {
                return [];
            }
        },
        rowClassName: {
            type: Array,
            default: () => {
                return [];
            }
        },
        rowConfig: {
            type: Array,
            default: () => [],
        },
        spanMethod: {
            type: Function,
            default() {
                return () => { };
            },
        },
        summaryMethod: {
            type: Function,
            default() {
                return () => { };
            },
        },
        showSummary: {
            type: Boolean,
            default: false,
        },
        isEditRow: {
            type: Boolean,
            default: false,
        },
        border: {
            type: Boolean,
            default: false,
        },
        height: {
            type: [String, Number],
            default: '600px',
        },
        // 其实是最大高度
        maxHeight: {
            type: [String, Number],
            default: '600px',
        },
        rowKey: {
            type: String,
            default: '',
        },
        pageObj: {
            type: Object,
            default() {
                return {
                    pageNo: 1,
                    pageSize: 10,
                    total: 0,
                };
            },
        },
        pageSizes: {
            type: Array as any,
            default: () => [10, 20, 30, 40, 100]
        },
    },
    emits: ['handleCurrentChange', 'handleSizeChange', 'handleSeletionChange', 'select', 'sortChange'],
    setup(props, { emit, attrs }) {
        const tableRef: any = ref(null);
        const cloneAtt = attrs;
        const maxTableHeight = ref(0);
        // 页数改变
        const onHandleCurrentChange = (val: number) => {
            console.log(`current page: ${val}`);
            emit('handleCurrentChange', val);
        };
        // 当前页展示条数变化
        const onHandleSizeChange = (val: number) => {
            console.log(`${val} items per page`);
            emit('handleSizeChange', val);
        };
        // 排序
        const onSortChange = (column: any) => {
            let sort = {};
            if (column.order) {
                const orders = column.order === 'ascending' ? column.order.substr(0, 3) : column.order.substr(0, 4);
                sort = {
                    sortFiled: column.prop,
                    sortValue: orders,
                };
            }
            emit('sortChange', sort);
        };

        const onHandleSeletionChange = (selection: any) => {
            emit('handleSeletionChange', selection);
        };

        const onSelect = (selection: any, row: any) => {
            emit('select', selection, row);
        };

        const clearSelection = () => {
            !!tableRef.value && tableRef.value.clearSelection();
        };
        onMounted(async () => {
            await nextTick();
            maxTableHeight.value = setTableMaxHeight('xc-table');
            console.log(maxTableHeight.value);
        });
        return {
            onHandleCurrentChange,
            onHandleSizeChange,
            onSortChange,
            onHandleSeletionChange,
            onSelect,
            clearSelection,
            cloneAtt,
            maxTableHeight,
        };
    }
});

</script>

<style lang='scss' scoped>
.Pagination {
    width: 100%;
    display: flex;
    justify-content: right;
    margin-top: 20px
}
</style>

